<template>
    <div>
        <el-button plain @click="openMultipleHandle">多选</el-button>
        <el-tag v-for="tag in members" :key="tag.name" closable @close="closeTagHandle(tag)" style="margin-right: 10px"> {{ tag.name }}</el-tag>
        <el-dialog title="选择成员" :visible.sync="selectMultipleMemberVisible" width="60%" :close-on-click-modal="false" :destroy-on-close="true">
            <MultipleSelect ref="selectMultipleMember" :listFields="listFields" :dataSource="list" type="filter"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="selectMultipleMemberVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitMultipleMember">确 定</el-button>
            </span>
        </el-dialog>

        <div class="interspaceH"></div>
        <el-button plain @click="selectMemberVisible = true">单选</el-button>
        <el-dialog title="选择成员" :visible.sync="selectMemberVisible" width="60%" :close-on-click-modal="false" :destroy-on-close="true">
            <ListSelect @getData="getData" :listFields="listFields" :dataSource="list" type="filter"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="selectMemberVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <el-tag> {{ member }}</el-tag>

        <div class="interspaceH"></div>
        <el-button plain @click="selectMaterialVisible = true">单选素材</el-button>
        <el-dialog title="选择素材" :visible.sync="selectMaterialVisible" width="80%" :close-on-click-modal="false" :destroy-on-close="true">
            <MaterialSelect @getData="getMaterialData"/>
        </el-dialog>

        <div style="text-align: center;height: 100px;width: 100px;margin: 10px" v-if="chooseMaterial != null">
            <img style="height: 88px" :src="chooseMaterial.materialLinksCover" class="avatar">
            <div style="font-size: 12px">{{ chooseMaterial.materialTitle }}</div>
        </div>
    </div>
</template>

<script>
import MultipleSelect from "@/components/list_multiple_select/list_multiple_select"
import ListSelect from "@/components/list_select/list_select"
import MaterialSelect from "@/components/material_select/material_select"
export default {
    name:'select',
    components: {MultipleSelect,ListSelect,MaterialSelect},
    data() {
        return {
            selectMultipleMemberVisible: false,
            selectMemberVisible: false,
            selectMaterialVisible: false,
            listFields: {
                name:'名称'
            },
            ruleForm: {
                name: '',
                members: []
            },
            list: [],
            members:[],
            member: "未选择",
            chooseMaterial: null
        }
    },
    mounted() {
        let that = this
        for (let i = 0; i < 36; i++) {
            that.list.push(
                {
                    id: i,
                    name: '名称' + (i + 1)
                }
            )
        }
    },
    methods: {
        submitMultipleMember() {
            let data = this.$refs.selectMultipleMember.getData();
            this.members = data
            this.selectMultipleMemberVisible = false
        },
        closeTagHandle(tag) {
            this.ruleForm.members.splice(this.ruleForm.members.indexOf(tag), 1);
        },
        getData(data) {
            this.member = data.name
            this.selectMemberVisible = false

        },
        openMultipleHandle() {
            this.selectMultipleMemberVisible = true
            this.$nextTick(() => {
                this.$refs.selectMultipleMember.toggleRowSelection(this.members)
            })
        },
        getMaterialData(data) {
            if (!data['materialLinksCover']) {
                data['materialLinksCover'] = require('@/assets/img/Pdf.png')
            }
            this.chooseMaterial = data
            this.selectMaterialVisible = false
        }
    }
}
</script>

<style scoped>

</style>
